import { Divider } from '@alifd/next';
import React from 'react';

const PriceCell = (props) => {
  const { value } = props;
  const currValue = _.cloneDeep(value);
  if (!currValue) return <></>;

  const CURRENCY_SYMBOL = {
    RMB: '¥',
    HKD: '$',
    MOP: '$',
  };

  const getDom = (obj) => {
    const keys = Object.keys(obj);
    const len = keys.length;
    if (len <= 0) return <></>;

    return ['RMB'].map((key, index) => {
      return (
        <>
          <div key={`${props.key}-div-${index}`} style={{ flex: 'flex', flexDirection: 'column' }}>
            <span style={{ display: 'block' }}>{`${CURRENCY_SYMBOL[key]}${obj[key]}`}</span>
          </div>
          {(index !== 0 && index !== len - 1) && <Divider direction="ver" />}
        </>
      );
    });
  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
        {getDom(currValue)}
      </div>
    </>
  );
};

export default PriceCell;
